<template>
  <view class="min-h-screen bg-gray-50">
    <!-- Profile Header -->
    <view class="rounded-lg border shadow-lg p-3 mt-4 bg-gray-100">
      <!-- 审核中是pink 审核通过是green -->
      <view class="p-3 bg-pink-400 rounded mb-2 text-white relative">
        审核中
        <view
          class="absolute right-0 -top-1 border-l-8 border-b-8 size-7 rounded-l bg-pink-300"
        ></view>
      </view>

      <!-- Profile Avatar view -->
      <view class="flex flex-col items-center">
        <view class="relative" @tap="fileUpload">
          <image
            :src="memberStore.profile!.headPortrait"
            class="relative w-24 h-24 rounded-full"
            mode="aspectFill"
          />
        </view>
        <text class="mt-2 text-sm font-medium">{{ memberStore.profile?.nickName }}</text>
      </view>
    </view>

    <!-- Stats -->
    <view class="flex justify-around items-center py-6 bg-white mt-2">
      <view class="flex flex-col items-center justify-center">
        <text class="text-xl font-medium">3</text>
        <text class="text-gray-500 text-sm mt-1">我喜欢的</text>
      </view>
      <view class="flex flex-col items-center justify-center">
        <image :src="userData.avatar" class="w-8 h-8 rounded-full blur-sm" mode="aspectFill" />
        <text class="text-gray-500 text-sm mt-1">喜欢我的</text>
      </view>
      <view class="flex flex-col items-center justify-center">
        <text class="text-xl font-medium">1</text>
        <text class="text-gray-500 text-sm mt-1">互相喜欢</text>
      </view>
    </view>

    <!-- Tasks -->
    <view class="bg-white mt-2 p-4">
      <view class="flex items-center mb-4">
        <image src="/static/images/102.png" class="w-5 h-5" />
        <text class="ml-2">完成以下任务即可获得7日优先推荐</text>
      </view>

      <view class="space-y-4 ml-2">
        <view class="flex justify-between items-center">
          <view class="flex items-center space-x-4">
            <text class="font-medium text-sm">双重认证 (0/2)</text>
            <text class="text-gray-500 text-xs">配对成功率提升200%</text>
          </view>
          <button class="bg-blue-100 text-blue-500 px-4 py-1 rounded-full text-sm">立即认证</button>
        </view>

        <view class="flex justify-between items-center">
          <view class="flex items-center space-x-4">
            <text class="font-medium text-sm">个人资料 </text>
            <text class="text-gray-500 text-xs">资料完善80%以上双倍曝光</text>
          </view>
          <navigator
            class="font-medium text-sm"
            url="/pages/my-edit/my-edit"
            open-type="navigate"
            hover-class="navigator-hover"
          >
            <button class="bg-blue-100 text-blue-500 px-4 py-1 rounded-full text-sm">
              立即完善
            </button></navigator
          >
        </view>
      </view>
    </view>

    <!-- Menu Items -->
    <view class="bg-white mt-2">
      <view class="flex justify-between items-center p-4 border-b border-gray-100">
        <view class="flex items-center">
          <text class="icon-coin text-blue-500 mr-2"></text>
          <text>鹊桥币</text>
          <text class="ml-2 text-gray-500">0</text>
        </view>
        <text class="text-gray-400">立即充值 ></text>
      </view>

      <navigator
        class="flex justify-between items-center p-4 border-b border-gray-100"
        url="/pages/my-edit/my-edit"
        open-type="navigate"
        hover-class="navigator-hover"
      >
        <view class="flex items-center">
          <text class="icon-_personalEdit text-purple-500 mr-2"></text>

          <text>个人资料</text>
        </view>
        <text class="text-gray-400">></text>
      </navigator>

      <view class="flex justify-between items-center p-4 border-b border-gray-100">
        <view class="flex items-center">
          <text class="icon-recommend text-blue-500 mr-2"></text>
          <text>推荐给好友</text>
        </view>
        <text class="text-gray-500">免费获得鹊桥币 ></text>
      </view>

      <view class="flex justify-between items-center p-4">
        <view class="flex items-center">
          <text class="icon-settings text-gray-500 mr-2"></text>
          <text>设置</text>
        </view>
        <text class="text-gray-400">></text>
      </view>
    </view>
    <view class="flex items-center justify-center w-full p-4">
      <text @tap="logout" class="text-gray-600">退出登录</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useMemberStore } from '@/stores/modules/member'
import { fileUpload } from '@/services/images'
const memberStore = useMemberStore()
const logout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    showCancel: true,
    success: ({ confirm, cancel }) => {
      if (confirm) {
        memberStore.clearProfile()
        uni.reLaunch({ url: '/pages/login/login' })
      }
    },
  })
}

//定义图片地址变量
// const avatarUrl2 = ref(
//   'https://mp-3309c116-4743-47d6-9979-462d2edf878c.cdn.bspapp.com/xxmPath/useravatar.png',
// )

//上传图片核心函数，将图片转base64，小程序和H5的方式不同，下面有条件编译

// Mock data
const userData = ref({
  avatar: 'https://i.pinimg.com/736x/37/f8/2d/37f82d5a37d07f1abb4f31f2daeacb9f.jpg',
  nickname: '微信用户',
  likes: 3,
  likedBy: 1,
  mutualLikes: 1,
  coins: 0,
  verificationStatus: '0/2',
})
</script>

<style>
/* Add custom styles for status bar height on different platforms */
.status-bar {
  height: var(--status-bar-height);
  padding-top: var(--status-bar-height);
}
</style>
